{% load i18n %}
{% load humanize static %}
{% load thumbnail %}


{% for reply in thread %}
  <li class="card" news-id="{{ reply.uuid_id }}">
    <div class="card-body">
      <div class="profile-picture">
        {% thumbnail reply.user.picture "x60" as im %}
          <img src="{{ im.url }}" class="pull-left" style="border-radius: 50%;" alt="{% trans 'User Image' %}" class="user-image">
        {% empty %}
          <img src="{% static 'img/user.png' %}" class="pull-left" height="60px" alt="{% trans 'No Profile Picture' %}" />
        {% endthumbnail %}
      </div>
      <div class="post">
        {% if reply.user == request.user %}
          <a href="{% url 'news:delete_news' reply.pk %}">
            <i class="fa fa-times pull-right" aria-hidden="true" title="{% trans 'Click to remove this news' %}"></i>
          </a>
        {% endif %}
        <p>
          <strong>
            <a href="{% url 'users:detail' reply.user.username  %}">{{ reply.user.get_profile_name|title }}</a>
          </strong>
        </p>
        <p>{{ reply }}</p>
        {% if reply.image %}
          <img class="card-img-top" src="{{ reply.image }}" alt="Card image cap">
        {% endif %}
      </div>
    </div>
    <div class="interaction" id="interaction">
      <a href="#" class="like" title="{% for i in news.get_likers %}{{ i }}&#10;{% endfor %}">
        {% if request.user in news.get_likers %}
          <i class="heart fa fa-heart" aria-hidden="true"></i>
        {% else %}
          <i class="heart fa fa-heart-o" aria-hidden="true"></i>
        {% endif %}
        <span class="like-count">{{ news.count_likers }}</span>
      </a>
      <span class="timestamp">{{ reply.timestamp|naturaltime }}</span>
    </div>
  </li>
{% endfor %}
